<template>
	<view class="topic-nav">
		<swiper-tab-header :tabBar="tabBar" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-header>
		<view class="uni-tab-bar tab">
			<swiper 
			:current="tabIndex" 
			class="swiper-box" 
			:style="{height: swiperHeight + 'px'}"
			@change="tabChange">
				<swiper-item v-for="(items, index1) in newslist" :key="index1">
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore(index1)">
						<view class="user-list" v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<topic-list :item="item" :index="index"></topic-list>
							</block>
							<!-- 上拉刷新 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</view>
						<!-- 无内容默认 -->
						<no-thing :nothing="!items.list.length > 0"></no-thing>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHeader from '../../components/index/swiper-tab-header.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/index/no-thing.vue';
	import topicList from '../../components/news/topic-list.vue';
	export default {
		data() {
			return {
				tabIndex: 0,
				swiperHeight: 0,
				tabBar:[
					{
						name: "关注",
						id: 'guanzhu'
					},
					{
						name: '推荐',
						id: 'tuijian'
					},
					{
						name: '体育',
						id: 'tiyu'
					},
					{
						name: '热点',
						id:'redian'
					},
					{
						name: '财经',
						id: 'caijing'
					},
					{
						name:'娱乐',
						id: 'yule'
					}
				],
				newslist:[
					{
						loadtext:'上拉加载更多',
						list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						}
					]
					},
					{
						loadtext:'上拉加载更多',
						list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						}
					]
					},
					{
						loadtext:'上拉加载更多',
						list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						}
					]
					},
					{
						loadtext:'上拉加载更多',
						list: []
					},
					{
						loadtext:'上拉加载更多',
						list: []
					},
					{
						loadtext:'上拉加载更多',
						list: []
					},
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.screenHeight - uni.upx2px(288)
				}
			})
		},
		methods: {
			// tap点击事件
			tabtap(index){
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(ev){
				this.tabIndex = ev.detail.current
			},
			loadmore(index){
				this.newslist[index].loadtext = "上拉加载更多";
				if(this.newslist[index].loadtext != "上拉加载更多"){
					return;
				}
				this.newslist[index].loadtext = "加载中...";
				uni.showLoading({
					title:"加载中...",
					mask:true,
					success: () => {
						let obj = {
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '#话题名称#',
							desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
							totalnum: 30,
							todaynum: 10
						};
						setTimeout(() => {
							this.newslist[index].list.push(obj)
							uni.hideLoading()
							this.newslist[index].loadtext = "上拉加载更多"
						}, 1000);
					}
				})
			}
		},
		components: {
			topicList,
			swiperTabHeader,
			loadMore,
			noThing
		}
	}
</script>

<style lang="scss" scoped>
.topic-nav{
	width:100%;
	.tab{
		padding-top: 100upx;
		box-sizing: border-box;
	}
	.user-list{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx;
	}
}
</style>
